<template>
  <div
    v-show="isShow"
    class="pt-dropdown"
    :style="{
      top,
      right,
      bottom,
      left
    }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ptDropdown",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    borderRadius: {
      type: String,
      default: "0px"
    },
    top: String,
    left: String,
    right: String,
    bottom: String
  },
  data () {
    return {
      isShow: false
    };
  },
  created () {
    this.isShow = this.visible;
  },
  watch: {
    visible (nVal) {
      this.isShow = nVal;
    },
    isShow (nVal) {
      this.$emit("update:visible", nVal);
    }
  },
  mounted () {
    const vm = this;
    document.addEventListener("mousedown", (ev) => {
      if (!vm.isThatChild(vm.$el.parentNode, ev.target)) {
        vm.isShow = false;
      }
    });
  },
  methods: {
    isThatChild (parent, child) {
      while (child.parentNode) {
        if (child === parent) {
          return true;
        }
        child = child.parentNode;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.pt-dropdown {
  position: absolute;
  min-width: 60px;
  min-height: 60px;
  box-shadow: 0px 0px 8px 2px rgba(23, 40, 60, 0.3);
  background-color: @bgColor3;
  z-index: 10;
}
</style>